<template>
  <el-scrollbar
      ref="scrollbar"
      @mouseenter="stopScroll"
      @mouseleave="startScroll"
      height="calc(100% - 42px)"
  >
    <slot/>
  </el-scrollbar>
</template>

<script setup>
import {ref, onMounted} from 'vue';

const content = ref('Your content goes here. '); // 你需要滚动的内容
let speed = 1; // 滚动速度
let direction = 1; // 滚动方向，1表示向下滚动，-1表示向上滚动
let lastTime = 0;
let isHovered = false
const scroll = (timestamp) => {
  if (isHovered) {
    return; // 如果鼠标悬停，停止滚动
  }
  const timeDiff = timestamp - lastTime;
  lastTime = timestamp;
  const scrollbar = document.querySelector('.el-scrollbar__wrap');
  if (scrollbar) {
    if (scrollbar.scrollTop >= scrollbar.scrollHeight - scrollbar.clientHeight) {
      direction = -1; // 当滚动到底部时，改变滚动方向为向上
    } else if (scrollbar.scrollTop <= 0) {
      direction = 1; // 当滚动到顶部时，改变滚动方向为向下
    }
    scrollbar.scrollBy(0, speed * direction * timeDiff / 16); // 根据速度、方向和时间差进行滚动，除以16是为了将速度调整为每秒60帧
  }
  requestAnimationFrame(scroll); // 递归调用自身，实现循环滚动
};

onMounted(() => {
  requestAnimationFrame(scroll); // 初次调用滚动函数
})
function startScroll() {
  isHovered = false;
  scroll();
}
function stopScroll() {
  isHovered = true;
}
</script>